<template>
  <div id="Service">
    <div class="container text-center">
      <h3>推荐课程</h3>
    </div>
    <div class="container">
      <div class="Service-container row">
        <div
          class="Service-item col-xs-12 col-sm-6 col-md-3"
          style="margin-top: 30px;"
          v-for="(item, index) in serviceList"
          :key="index"
          @click="ServiceClick(item.id)"
        >
          <div class="Service-item-wrapper">
            <div class="Service-item-img">
              <img :src="item.image" alt="课程" />
            </div>
            <div class="Service-item-top">
              <h4>{{ item.name }}</h4>
              <p>类别：{{ item.typeName }}</p>
            </div>
            <div class="Service-item-border"></div>
          </div>
        </div>
      </div>
      <!-- <Page
        :total="total"
        size="small"
        show-elevator
        show-sizer
        @on-change="pageChange"
        @on-page-size-change="sizeChange"
      /> -->
    </div>
  </div>
</template>
<script>
import { getRecommendListApi } from "@/api/api";
export default {
  name: "Course",
  data() {
    return {
      serviceList: [],
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        title: ""
      },
      total: 0,
      indexMenu: "1"
    };
  },
  created() {
    this.getRecommendList();
  },
  methods: {
    selectMenu(e) {
      this.indexMenu = e;
      this.queryParams.pageNum = 1;
      if(e == 1) {
        this.getRecommendList();
      } else {
        this.getCourseList();
      }
    },
    pageChange(e) {
      this.queryParams.pageNum = e;
      this.getCourseList();
    },
    sizeChange(e) {
      this.queryParams.pageSize = e;
      this.getCourseList();
    },
    getRecommendList() {
      getRecommendListApi().then(res => {
        this.serviceList = res.data;
      })
    },
    getCourseList() {
      getCourseListApi(this.queryParams).then(res => {
        this.serviceList = res.data.rows;
        this.total = res.total;
      });
    },
    ServiceClick(id) {
      this.$router.push({
        name: "courseDetail",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style scoped>
.Service-container {
  padding: 30px 50px;
}

.Service-item {
  margin-bottom: 50px;
}

.Service-item-wrapper {
  cursor: pointer;
  background: rgba(244, 244, 244, 1);
  overflow: hidden;
  position: relative;
}

.Service-item-top {
  width: 100%;
  padding: 10px;
  text-align: center;
}

.Service-item-img {
  width: 100%;
  height: 250px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.Service-item-img img {
  width: 100%;
  height: 100%;
}
</style>
